import React, { Component } from 'react';
import { getList } from "../../api"
import { Pagination, Form, Icon, Input, Button, Card, Avatar, Drawer, Col, Row, Switch, message, Upload } from 'antd';
const { Meta } = Card;
const { Dragger } = Upload;

const props = {
    name: 'file',
    multiple: true,
    action: '/upload',
    headers:{token:localStorage.getItem("userInfo")?JSON.parse(localStorage.getItem("userInfo")).token:null},
    onChange(info) {
        const { status } = info.file;
        if (status !== 'uploading') {
            console.log(info.file, info.fileList);
        }
        if (status === 'done') {
            message.success(`${info.file.name} file uploaded successfully.`);


            console.log(info.file.response.url);
        } else if (status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
};
function onChange(checked) {
    console.log(`switch to ${checked}`);
}
class Index extends Component {
    state = {
        visible: false,
        List: [],
        pagesize: 6,
        page: 1,
        total: 0,
        url:"",
    };

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };
    onClose = () => {
        this.setState({
            visible: false,
        });
        console.log(this.state.visible);
    };
    componentDidMount() {
        // To disable submit button at the beginning.
        this.props.form.validateFields();
        this.getData();
    }
    async getData() {
        let { pagesize, page, total } = this.state
        let res = await getList({ pagesize, page, total })
        if (res.data.code === 2) {
            this.setState({
                List: res.data.data,
                total: res.data.total
            }, () => {
                console.log(this.state.List);
            })
        }
    }
    Pageword = (current, pagesize) => {
        console.log("aaa");
        console.log(current, pagesize, "11111111111");
        this.setState({
            page: current,
            pagesize: pagesize
        }, () => {
            this.getData()
        })

    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };
    render() {
        const { getFieldDecorator, getFieldError, isFieldTouched } = this.props.form;
        const { List, pagesize, page, total } = this.state;
        // Only show error after a field is touched.
        const usernameError = isFieldTouched('username') && getFieldError('username');
        const passwordError = isFieldTouched('password') && getFieldError('password');
        return (
            <div>
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
                        {getFieldDecorator('dadas')(
                            <Input
                                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="Username"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
                        {getFieldDecorator('adsda')(
                            <Input
                                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                type="password"
                                placeholder="Password"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" >搜索</Button>
                        <Button>重置</Button>
                    </Form.Item>
                </Form>
                <div className="dataList">
                    {
                        List && List.length > 0 ? List.map((item, index) => {
                            return <div key={index}>
                                <Drawer
                                    title="修改"
                                    width={720}
                                    onClose={this.onClose}
                                    visible={this.state.visible}
                                    bodyStyle={{ paddingBottom: 80 }}
                                >
                                    <Form layout="vertical" hideRequiredMark>
                                        <Row gutter={16}>
                                            <Col span={12}>
                                                <Form.Item label="名称">
                                                    {getFieldDecorator('comName',)(<Input placeholder={item.comName} />)}
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        <Row gutter={16}>
                                            <Col span={12}>
                                                <Form.Item label="上传时间">
                                                    {getFieldDecorator('timer',)(<Input placeholder={item.timer} />)}
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        评论    <Switch defaultChecked onChange={onChange} />
                                        <Row gutter={16}>
                                            <Col span={24}>
                                                <Form.Item label="描述">
                                                    {getFieldDecorator('description')(<Input.TextArea rows={4} placeholder="描述内容" />)}
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                        封面<Dragger {...props}>
                                            <img
                                                alt="example"
                                                src={item.imgurl}
                                            />
                                        </Dragger>
                                        <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
                                            {getFieldDecorator('username',)(
                                                <Input
                                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                                    placeholder="URL"
                                                />,
                                            )}
                                        </Form.Item>
                                    </Form>
                                    <div
                                        style={{
                                            position: 'absolute',
                                            right: 0,
                                            bottom: 0,
                                            width: '100%',
                                            borderTop: '1px solid #e9e9e9',
                                            padding: '10px 16px',
                                            background: '#fff',
                                            textAlign: 'right',
                                        }}
                                    >
                                        <Button onClick={this.onClose} style={{ marginRight: 8 }}>
                                            取消
                                        </Button>
                                        <Button onClick={this.onClose} type="primary">
                                            更新
                                        </Button>
                                    </div>
                                </Drawer>
                                <Card
                                style={{ width: 300 }}
                                cover={
                                    <img
                                        alt="example"
                                        src={item.imgurl}
                                    />
                                }
                                actions={[
                                    <Icon type="arrow-down" key="setting" />,
                                    <Icon type="edit" key="edit" onClick={this.showDrawer} />,
                                    <Icon type="delete" key="ellipsis" />,
                                ]}
                            >
                                
                                <Meta
                                    avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                    title={item.comName}
                                    description={item.timer}
                                />
                            </Card>
                            </div>
                        }) : null
                    }
                </div>
                <Pagination style={{ marginLeft: '900px' }} onChange={this.Pageword} defaultPageSize={pagesize} defaultCurrent={page} total={total} />
            </div>
        );
    }
}

export default Form.create({ name: 'horizontal_login' })(Index);